<template>
	<view @click="play" class="content">
		<image class="jige" src="/static/3.png" mode=" aspectFit"></image>
		<image :class=" flag?'hand-act':''" class="hand" src="/static/5.png" mode=" aspectFit"></image>
		<image :class="flag?'lanqiu_act':''" class="lanqiu " src="/static/2.png" mode=" aspectFit"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false
			}
		},
		onLoad() {

		},
		methods: {

			play() {
				let _this = this
				_this.flag = true
				setTimeout(function() {
						_this.flag = false
					},
					100)
			}
		}
	}
</script>

<style>
	page {
		background-color: #202020;
	}

	@keyframes ball-animation {

		from {
			margin-top: 50rpx;
		}

		to {
			margin-top: 200rpx;
		}

	}

	@keyframes hand-animation {

		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-20deg);
			/* margin-top:  200rpx; */
		}

	}

	.content {
		height: 100vh;
	}

	.hand {
		width: 260rpx;
		height: 260rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -220rpx;
		margin-top: -30rpx;
		transform-origin: 260rpx 130rpx;

	}

	.hand-act {
		animation: hand-animation linear .1s infinite alternate;

	}

	.jige {
		width: 400rpx;
		height: 400rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -100rpx;
		margin-top: -200rpx;
		z-index: 9;
	}

	.lanqiu {
		width: 160rpx;
		height: 160rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -230rpx;
		margin-top: 50rpx;

	}

	.lanqiu_act {
		animation: ball-animation linear .1s infinite alternate;
	}
</style>
